<template>
  <el-card shadow="hover" class="section-card" v-if="submitted">
    <template #header>图例设置</template>
    <el-form-item label="图例标题文本" prop="lTitleText">
      <el-input v-model="form.lTitleText" clearable/>
    </el-form-item>
    <el-form-item label="图例标题颜色" prop="lTitleColor">
      <el-color-picker v-model="form.lTitleColor" />
    </el-form-item>
    <el-form-item label="图例标题大小" prop="lTitleSize">
      <el-input-number v-model="form.lTitleSize" :max="100" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="图例标签颜色" prop="lTextColor">
      <el-color-picker v-model="form.lTextColor" />
    </el-form-item>
    <el-form-item label="图例标签大小" prop="lTextSize">
      <el-input-number v-model="form.lTextSize" :max="100" :min="1" :step="1" />
    </el-form-item>
  </el-card>
</template>

<script lang="ts" setup>
import {computed} from "vue";
defineOptions({name: "LegendCard"})
const props = defineProps<{
  modelValue:{
    lTitleText: string
    lTitleColor: string
    lTitleSize: number
    lTextColor: string
    lTextSize: number
  },
  submitted: boolean
}>()
const emit = defineEmits<{
  (
    e: 'update:modelValue',
    payload: {
    lTitleText: string
    lTitleColor: string
    lTitleSize: number
    lTextColor: string
    lTextSize: number
    }
  ): void
}>()
const form = computed(
  {
    get() {
      return props.modelValue
    },
    set(val) {
      emit('update:modelValue', { ...val })
    }
  }
)







</script>

<style scoped>
.section-card {
  margin-bottom: 16px;
}
</style>
